<template>
  <div>
    <count-to @sjf="handle" ref="parentCount" :end-val="endVal" :duration=5 className='myCount'>
      <span slot="left">金额</span>
      <b slot="right">元</b>
    </count-to>
    <button @click="getNumbers">获取数值</button>
    <button @click="setEndVal">设置新值</button>
  </div>
</template>
<script>
import CountTo from '@/components/countTo'
export default {
  name: 'count_to',
  components:{
    CountTo
  },
  data(){
    return {
      endVal: 500
    }
  },
  methods: {
    // ref 用在组件上，获取的就是这个组件的实例 用在原生的html上获取的就是dom
    getNumbers(){
      this.$refs.parentCount.getNumber();
    },
    setEndVal(){
      this.endVal += 100
    },
    handle(num){
      console.log("事件触发了", num)
    }
  }
}
</script>
<style>
  .myCount{
    font-size:20px;
    background:yellow;
  }
</style>


